<template>
    <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
      <el-form label-width="80px" :model="form" ref="form" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    </div>
  </template>
  
  <script>
  import {nameRule,passRule } from '../utils/validate.js'
  import {setToken } from '../utils/setToken.js'
  import { login } from '@/api/api.js'

  export default {
    name: 'HelloWorld',
    data(){
      return {
        form:{
          username:'',
          password:''
        },
        rules:{
            username:[{validator:nameRule,trigger: 'blur'}],
            password:[{validator:passRule,trigger: 'blur'}]
        }
      }
    },
    methods:{
      login(form){
          this.$refs[form].validate((valid)=>{
            if(valid){
              console.log(this.form)
            //   this.axios.post('http://localhost:8080/bike/login',this.form)
            //   .then(res =>{
            //     console.log(res)
            //   })
            // localStorage.setItem('username',this.form.username)
              //setToken("username",this.form.username);
              //this.$message({message:'登陆成功',type:'success'});
              //this.$router.push('/home');

              //let LoginParam = this.form;
              //this.service.post('/login',LoginParam)
              //  .then(res=>{
              //   console.log(res)
              //  if(res.data.code === 200){
               //     setToken('username',res.data.username)
              //    setToken('token',res.data.token)
              //     this.$message({message:res.data.msg, type:'success'})
              //  this.$router.push('/home')
               //   }        
               // });
                let LoginParam = this.form;
                login(LoginParam).then(res=>{
                    if(res.data.code === 200){
                      setToken('username',res.data.username)
                      setToken('token',res.data.token)
                      this.$message({message:res.data.msg, type:'success'})
                      this.$router.push('/home')
                  }  
                })
            }else{
              console.error(this.form)
            }
          })
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .login{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #409EFF;
  }
  .box-card{
    width: 450px;
    margin:200px auto;
  }
  </style>